<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>键盘事件</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
  </head>
  <body>
            <!-- 
                1.Vue中常用的按键别名：
                      回车 => enter
                      删除 => delete (捕获“删除”和“退格”键)
                      退出 => esc
                      空格 => space
                      换行 => tab (特殊，必须配合keydown去使用,配合keyup已经切换走了触发不了)
                      上 => up
                      下 => down
                      左 => left
                      右 => right

                2.Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case（短横线命名）
                意思是大部分按键都有key和keycode key是按键的名称 keycode是按键的代码  如CapsLock 20,且在使用时需要变成caps-lock
                在vue中 有时候需要在驼峰命名和短横线命名之间切换

                3.系统修饰键（用法特殊）：ctrl、alt、shift、meta(徽标键)
                      (1).配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。需要指定特殊的可以@keydown.ctrl.y 指定是ctrl+y才能触发
                      (2).配合keydown使用：正常触发事件。

                4.也可以使用keyCode去指定具体的按键（不推荐）

                5.Vue.config.keyCodes.自定义键名 = 键码，可以去定制按键别名(不推荐)
            -->
            <!-- 准备好一个容器-->
            <div id="root">
              <h2>欢迎来到{{name}}学习</h2>
              <input
                type="text"
                placeholder="按下回车提示输入"
                @keydown.huiche="showInfo"
              />
              <!-- huiche别名是自己定义的 -->
            </div>
          </body>

          <script type="text/javascript">
            Vue.config.productionTip = false; //阻止 vue 在启动时生成生产提示。
            Vue.config.keyCodes.huiche = 13; //定义了一个别名按键

            new Vue({
              el: "#root",
              data: {
                name: "尚硅谷",
              },
              methods: {
                showInfo(e) {
                  // console.log(e.key,e.keyCode)
                  console.log(e.target.value);
                },
              },
            });
  </script>
</html>
